<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>产品管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <script src="vendor/jquery/jquery.js"></script>
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->


</head>

<script>
    $(function () {
        //存储这次查询获取的数据
        var goodsListData;

        var page = 0;
        var pageSize = 5;

        //下一页点击事件添加
        $("#goodsListPageDown").click(function () {
            page++;
            $("#searchGoodsBtn").click();
        })

        //上一页点击事件添加
        $("#goodsListPageup").click(function () {
            if (page > 0) {
                page --;
            }
            $("#searchGoodsBtn").click();
        })


        //修改产品点击事件
        $("#saveEditGoods").click(function () {
            var editGN = $("#editGoodsName").val();
            var editPU = $("#editPieceUnit").val();
            var editWU = $("#editWeightUnit").val();
            var editGoodsId = $("#editId").val();
            //发送ajax请求修改
            $.ajax({
                url: "/erp/goods/update",
                dataType:"json",
                type:"POST",
                data:{"id":editGoodsId,"goodName":editGN,"weightPrize":editWU,"piecePrize":editPU},
                //请求成功回调此函数，data为返回的数据
                success:function (data) {
                    console.log(data);
                    if(data.code == 200) {
                        //重置表格数据
                        $("#searchGoodsBtn").click();
                        //重置模态框数据
                        $("#editGoodsName").val("");
                        $("#editPieceUnit").val("");
                        $("#editWeightUnit").val("");
                        $("#editId").val("");
                        //关闭模态框
                        $("#editGoodsClose").click();
                        alert("修改成功");
                    } else {
                        alert(data.data)
                    }

                }
            })
        })

        //删除产品（支持多选）
        $("#goodsListRemove").click(function () {
            var idArray = [];
            console.log($("input:checked"));
            //选取选中的CheckBox，并循环遍历，将ID加入到idArray中
            $("input:checked").each(function () {
                // console.log($(this).attr("id"));
                // console.log($(this).attr("id").substring(5));
                idArray.push($(this).attr("id").substring(5));
            })

            //Ajax发送到后台删除
            $.ajax({
                url: "/erp/goods/list/delete",
                dataType:"json",
                type:"POST",
                data:{"idArray":idArray},
                //请求成功回调此函数，data为返回的数据
                success:function (data) {
                    console.log(data);
                    if (data.code != 200) {
                        alert(data.data)
                    } else {
                        //重置表格数据
                        $("#searchGoodsBtn").click();
                        alert("删除成功");
                    }
                }
            })
        })
        
        function generateTable(data) {
            $("#searchGoodsTable").append("<thead>"+
                "<tr>" +
                    "<th valign=middle align=center></th>" +
                    "<th valign=middle align=center >ID</th>" +
                    "<th valign=middle align=center>商品名称</th>" +
                    "<th valign=middle align=center>单价（/匹）</th>" +
                    "<th valign=middle align=center>单价（/千克）</th>"+
                    "<th valign=middle align=center></th>"+
                "</tr>" +
            "</thead>");
            for (var i = 0; i < data.data.length; i++) {
                $("#searchGoodsTable").append("<tr>"+
                    "<td>"+
                    "<input id='goods"+ data.data[i].id + "' type='checkbox'>"+
                    "</td>"+
                    "<td>"+
                    data.data[i].id+
                    "</td>"+
                    "<td>"+
                    data.data[i].goodName+
                    "</td>"+
                    "<td>"+
                    data.data[i].piecePrize+
                    "</td>"+
                    "<td>"+
                    data.data[i].weightPrize+
                    "</td>"+
                    "<td>"+
                    "<button type=\"button\" data-toggle=\"modal\" data-target=\"#goodsModal\" class=\"btn btn-link \" id='goodsUpdate"+ data.data[i].id +"'>编辑</button>"+
                    "</td>"+
                    "</tr>"
                );
                $("#goodsUpdate" + data.data[i].id).click(function () {
                    // console.log(goodsListData);
                    // console.log($(this).attr("id").substring(11));
                    var currentUpdateId = $(this).attr("id").substring(11);
                    var currentGoods = null;
                    for (var temp in goodsListData.data) {
                        console.log(temp);
                        if (goodsListData.data[temp].id == parseInt(currentUpdateId)) {
                            currentGoods = goodsListData.data[temp];
                        }
                    }
                    $("#editGoodsName").val(currentGoods.goodName);
                    $("#editPieceUnit").val(currentGoods.piecePrize);
                    $("#editWeightUnit").val(currentGoods.weightPrize);
                    $("#editId").val(currentGoods.id);
                })
            }
        }

        $("#searchGoodsBtn").click(function () {

            //判断是否模糊查询
            var name = $("#searchGoodsText").val();
            //console.log("name"+name);
            if(name != "") {
                //ajax获取后台数据，模糊查询
                $.ajax({
                    url: "/erp/goods/list/name/"+page+"/"+pageSize,
                    dataType:"json",
                    type:"GET",
                    data:{"name":name},
                    //请求成功回调此函数，data为返回的数据
                    success:function (data) {
                        console.log(data);
                        //判断返回数据，若为空，则说明下一页无数据，重置page的值
                        if (data.code == 400) {
                            alert("无相关产品信息");
                            if (page > 0) {
                                page--;
                            }
                            return;
                        } else {
                            goodsListData = data;
                            $("#searchGoodsTable").empty();
                            generateTable(data);
                        }

                    }
                })
                return;
            }

            //从后台获取产品列表
            $.ajax({
                url: "/erp/goods/list/"+page+"/"+pageSize,
                dataType:"json",
                type:"GET",
                //请求成功回调此函数，data为返回的数据
                success:function (data) {
                    console.log(data);
                    //判断返回数据，若为空，则说明下一页无数据，重置page的值
                    if (data.code == 400) {
                        alert("无相关商品信息")
                        if (page > 0) {
                            page--;
                        }
                        return;
                    } else {
                        goodsListData = data;
                        //console.log(goodsListData);
                        $("#searchGoodsTable").empty();
                        generateTable(data);
                    }
                }
            })
        })

        $("#saveNewGoodsBtn").click(function () {
            console.log("click");
            var name = $("#newGoodsName").val();
            var weight = $("#kgUnit").val();
            var piece = $("#pieceUnit").val();
            console.log(name + weight + piece)

            $.ajax({
                url:"/erp/goods/add",
                type:"POST",
                dataType:"json",
                data:{"goodName":name,"weightPrize":weight,"piecePrize":piece},
                success:function (data) {
                    console.log(data)
                    if (data.code == 200){
                        alert("新建产品成功")
                    } else{
                        alert(data.data)
                    }
                    $("#newGoodsName").val("");
                    $("#kgUnit").val("");
                    $("#pieceUnit").val("");
                    //关闭模态框
                    $("#newGoodsClose").click();
                    $("#searchGoodsBtn").click();
                }
            })
        })


    })

</script>


<body>
<div class="page">
    <!-- Main Navbar-->
    <header class="header">
        <nav class="navbar">
            <!-- Search Box-->
            <div class="search-box">
                <button class="dismiss"><i class="icon-close"></i></button>
                <form id="searchForm" action="#" role="search">
                    <input type="search" placeholder="What are you looking for..." class="form-control">
                </form>
            </div>
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <!-- Navbar Header-->
                    <div class="navbar-header">
                        <!-- Navbar Brand --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
                        <div class="brand-text d-none d-lg-inline-block"><strong>子恒针erp</strong></div>
                    </a>

                        <!-- Toggle Button--><a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <!-- Navbar Menu -->

                </div>
            </div>
        </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
        <!-- Side Navbar -->
        <nav class="side-navbar">

            <!-- Sidebar Navidation Menus-->
            <ul class="list-unstyled">

                <li ><a href="#producedropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i><font color="black" size="3.8"> <strong>生产管理</strong></font></a>
                    <ul id="producedropdownDropdown" class="collapse list-unstyled ">
                        <li ><a href="#orderDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong> 订单管理</strong></font></a>
                            <ul id="orderDropdown" class="collapse list-unstyled ">
                                <li ><a href="addOrder.html">&nbsp;&nbsp;&nbsp;&nbsp;新增订单</a></li>

                                <li><a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;查询订单</a></li>
                            </ul>
                        </li>

                        <li><a href="searchGoods.html"><font color=black size="3"><strong>产品管理</strong></font></a>
                            <!--<ul id="planDropdown" class="collapse list-unstyled ">-->
                                <!--<li><a href="">&nbsp;&nbsp;&nbsp;&nbsp;新增产品</a></li>-->
                                <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;<u>查询产品</u></a></li>-->
                            <!--</ul>-->
                        </li>

                        <li><a href="manageCustomer.html"><font color="#626262" size="3"><strong>客户管理</strong></font></a>
                            <!--<ul id="taskDropdown" class="collapse list-unstyled ">-->
                                <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增客户</a></li>-->
                                <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询客户</a></li>-->
                            <!--</ul>-->
                        </li>

                        <li><a href="#processDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>生产工艺管理</strong></font></a>
                            <ul id="processDropdown" class="collapse list-unstyled ">
                                <li><a href="makeProductionTechnology.html">&nbsp;&nbsp;&nbsp;&nbsp;新增生产工艺</a></li>
                                <li><a href="manageProductionTechnology.html">&nbsp;&nbsp;&nbsp;&nbsp;查询生产工艺</a></li>
                            </ul>
                        </li>

                        <li><a href="manageOutsourcingEnterprise.html"><font color="#626262" size="3"><strong>外协企业管理</strong></font></a>
                            <!--<ul id="unfinishedDropdown" class="collapse list-unstyled ">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增外协企业</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;管理外协企业</a></li>-->
                            <!--</ul>-->
                        </li>

                        <!-- <li><a href="#dyeingDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>印染过程管理</strong></font></a>
                             <ul id="dyeingDropdown" class="collapse list-unstyled ">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;印染入库</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;印染出库</a></li>
                             </ul>
                         </li>

                         <li><a href="#finishedDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>成品出入库管理</strong></font></a>
                             <ul id="finishedDropdown" class="collapse list-unstyled ">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;成品入库</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;成品出库</a></li>
                             </ul>
                         </li>

                         <li><a href="#inquireDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>综合查询</strong></font></a>
                             <ul id="inquireDropdown" class="collapse list-unstyled ">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;订单完成情况</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;生产过程</a></li>
                             </ul>
                         </li>-->
                    </ul>
                </li>

                <!--库存管理-->
                <li ><a href="#stockdropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i><font  size="3.8"> <strong>库存管理</strong></font></a>
                    <ul id="stockdropdownDropdown" class="collapse list-unstyled ">
                        <li><a href="manageSupplier.html" ><font color="#626262" size="3"><strong>供应商关系管理</strong></font></a>
                            <!--<ul id="supplierDropdown" class="collapse list-unstyled">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增供应商</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询供应商</a></li>-->
                            <!--</ul>-->
                        </li>

                        <li><a href="manageRawMaterial.html" ><font color="#626262" size="3"><strong>原材料信息管理</strong></font></a>
                            <!--<ul id="rawDropdown" class="collapse list-unstyled">-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增原材料</a></li>-->
                            <!--<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询原材料</a></li>-->
                            <!--</ul>-->
                        </li>

                        <!--<li><a href="#purchaseDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>原材料采购管理</strong></font></a>
                            <ul id="purchaseDropdown" class="collapse list-unstyled">
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增订单</a></li>
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改订单</a></li>
                                <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询订单</a></li>
                            </ul>
                        </li-->

                        <li><a href="manageRMInventory.html" ><font color="#626262" size="3"><strong>原材料库存管理</strong></font></a>
                        </li>

                        <li><a href="managePDenterprise.html" ><font color="#626262" size="3"><strong>印染企业管理</strong></font></a>
                        </li>

                        <li><a href="manageOutsourcingRMInventory.html" ><font color="#626262" size="3"><strong>外协企业原材料管理</strong></font></a>
                        </li>

                        <li><a href="manageFinishedGoods.html" ><font color="#626262" size="3"><strong>成品库存管理</strong></font></a>
                        </li>

                        <!-- <li><a href="#customerDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>客户关系管理</strong></font></a>
                             <ul id="customerDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增客户</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改客户</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询客户</a></li>
                             </ul>
                         </li>

                         <li><a href="#foundryDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>代工企业关系管理</strong></font></a>
                             <ul id="foundryDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增代工企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改代工企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询代工企业</a></li>
                             </ul>
                         </li>

                         <li><a href="#techniqueDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>生产工艺管理</strong></font></a>
                             <ul id="techniqueDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增工艺</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改工艺</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询工艺</a></li>
                             </ul>
                         </li>
                         <li><a href="#dyeingcompanyDropdown" aria-expanded="false" data-toggle="collapse"><font color="#626262" size="3"><strong>印染企业关系管理</strong></font></a>
                             <ul id="dyeingcompanyDropdown" class="collapse list-unstyled">
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;新增企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;修改企业</a></li>
                                 <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;查询企业</a></li>
                             </ul>
                         </li>-->
                    </ul>
                </li>

            </ul>
        </nav>

        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">查询产品</h2>
                </div>
            </header>
            <!-- Breadcrumb-->
            <section>
                <div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center">
                                <h3 class="h4"></h3>
                            </div>

                            <div class="card-body">
                                <form class="form-order">

                                    <div class="form-group row">
                                    <label class="col-lg-2 form-control-label no-padding-bottom container-fluid text-center"><font size="3.5"> 产品名称：</font></label>
                                    <div class="col-lg-8 ">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="searchGoodsText">
                                        </div><!-- /input-group -->
                                    </div><!-- /.col-lg-10 -->
                                    <button type="button"  class="btn btn-primary col-lg-2 " id="searchGoodsBtn">查询</button>
                                    </div>

                                </form>

                                <div class="form-group row">
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <button type="button" data-toggle="modal" data-target="#newGoodsModal" class="btn btn-primary ">新增</button>

                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <button type="button" class="btn btn-secondary" id="goodsListRemove">删除</button>
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <button type="button" class="btn btn-secondary" id="goodsListPageup">上一页</button>

                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <button type="button" class="btn btn-secondary" id="goodsListPageDown">下一页</button>

                                    <!--新增 模态框-->
                                    <div id="newGoodsModal" tabindex="-1" role="dialog" aria-labelledby="newGoodsModalLabel" aria-hidden="true" class="modal fade text-left">
                                        <div role="document" class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 id="newGoodsModalLabel" class="modal-title">新增产品信息</h4>
                                                    <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                                                </div>
                                                <div class="modal-body">

                                                    <form>
                                                        <div class="form-group">
                                                            <label>产品名称</label>
                                                            <input type="name" class="form-control" id="newGoodsName">
                                                        </div>
                                                        <div>
                                                            <label>单价（/匹）</label>
                                                            <input type="number" class="form-control" id="pieceUnit">
                                                        </div>
                                                        <div>
                                                            <label>单价（/千克）</label>
                                                            <input type="number" class="form-control" id="kgUnit">
                                                        </div>

                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" data-dismiss="modal" class="btn btn-secondary" id="newGoodsClose">关闭</button>
                                                    <button type="button" class="btn btn-primary" id="saveNewGoodsBtn">保存</button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                </div>

                                <table class="table table-striped table-sm" id="searchGoodsTable">
                                    <thead>
                                    <tr>
                                        <th valign=middle align=center ></th>
                                        <th valign=middle align=center >ID</th>
                                        <th valign=middle align=center>产品名称</th>
                                        <th valign=middle align=center>单价（/匹）</th>
                                        <th valign=middle align=center>单价（/千克）</th>
                                        <th valign=middle align=center></th>

                                        <!--编辑 模态框-->
                                        <div id="goodsModal" tabindex="-1" role="dialog" aria-labelledby="goodslModalLabel" aria-hidden="true" class="modal fade text-left">
                                            <div role="document" class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h4 id="goodsModalLabel" class="modal-title">编辑产品信息</h4>
                                                        <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                                                    </div>
                                                    <div class="modal-body">

                                                        <form>
                                                            <div>
                                                                <label>产品ID</label>
                                                                <input type="text" class="form-control" id="editId" disabled="disabled">
                                                            </div>
                                                            <div class="form-group">
                                                                <label>产品名称</label>
                                                                <input type="name" class="form-control" id="editGoodsName">
                                                            </div>
                                                            <div>
                                                                <label>单价（/匹）</label>
                                                                <input type="text" class="form-control" id="editPieceUnit">
                                                            </div>
                                                            <div>
                                                                <label>单价（/千克）</label>
                                                                <input type="text" class="form-control" id="editWeightUnit">
                                                            </div>

                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" data-dismiss="modal" class="btn btn-secondary" id="editGoodsClose">关闭</button>
                                                        <button type="button" class="btn btn-primary" id="saveEditGoods">保存</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!--编辑 模态框-->


                                    </tr>
                                    </thead>

                                </table>

                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Your company &copy; 2017-2019</p>
                        </div>

                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- Main File-->
<script src="js/front.js"></script>
</body>
</html>